<template>
	<view class="listWrap">
		<template v-if="pageType == 'listPage'">
			<view class="resList hasFlex">
				<view class="resImg">
					<image class="samePar posAbso" mode="aspectFill" :src="getStaticFilePath('kcItemFm.png')"></image>
					<view class="resTag posAbso">心理科普</view>
				</view>
				<view class="resCon">
					<view class="resTit">发大师傅立刻就广泛的发的司法解释付</view>
					<view class="resBot spaceBet">
						<view class="price">¥29.9</view>
						<view class="botBtn">购买</view>
					</view>
				</view>
			</view>
			<view class="resList hasFlex">
				<view class="resImg">
					<image class="samePar posAbso" mode="aspectFill" :src="getStaticFilePath('kcItemFm.png')"></image>
					<view class="resTag posAbso">心理科普</view>
				</view>
				<view class="resCon">
					<view class="resTit">发大师傅立刻就广泛的发的司法解释付</view>
					<view class="resBot spaceBet">
						<view class="viewNum">浏览次数:160</view>
						<view class="botBtn">去学习</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else-if="pageType == 'favorPage'">
			<view class="resList hasFlex">
				<view class="resImg">
					<image class="samePar posAbso" mode="aspectFill" :src="getStaticFilePath('kcItemFm.png')"></image>
					<view class="resTag posAbso">心理科普</view>
				</view>
				<view class="resCon favor">
					<view class="resTit">发大师傅立刻就广泛的发的司法解释付</view>
					<view class="resBot spaceBet">
						<view class="viewNum">收藏人数:160</view>
						<view class="botBtn favorBtn">取消收藏</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else-if="pageType == 'myCourse'">
			<view class="resList hasFlex">
				<view class="resImg">
					<image class="samePar posAbso" mode="aspectFill" :src="getStaticFilePath('kcItemFm.png')"></image>
					<view class="resTag posAbso">心理科普</view>
				</view>
				<view class="resCon favor">
					<view class="resTit">发大师傅立刻就广泛的发的司法解释付</view>
					<view class="resBot spaceBet">
						<view class="viewNum">共76节</view>
						<view class="botBtn favorBtn">去学习</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props:{
			pageType:{
				type:String,
				default:'listPage'//listPage(通用list) favorPage(我的收藏) myCourse(我的课程)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listWrap{
		margin-left: 20rpx;
		padding-bottom: 30rpx;
		.resList{
			margin-bottom: 50rpx;
			&:last-child{
				margin-bottom: 0rpx;
			}
		}
		.resImg{
			width: 170rpx;
			height: 190rpx;
			background: #F5C651;
			border-radius: 16rpx 0 0 16rpx;
			position: relative;
			.samePar{
				border-radius: 16rpx;
				left: -20rpx;
				top: -20rpx;
			}
			.resTag{
				height: 50rpx;
				line-height: 50rpx;
				background: #F5C651;
				color: #fff;
				border-radius: 12rpx 0 0 12rpx;
				right: 0;
				top: 30rpx;
				font-size: 24rpx;
				padding: 0 15rpx;
			}
		}
		.resCon{
			background: #F9F8FF;
			flex: 1;
			padding: 0 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&.favor{
				background: #fff;
				border-radius: 16rpx;
			}
			.resTit{
				height: 70rpx;
				font-size: 30rpx;
				color: $sq-main0;
				font-weight: 600;
				margin-top: 15rpx;
			}
			.resBot{
				margin-bottom: 15rpx;
				align-items: center;
				.price{
					color: $pss-sq-red;
					font-weight: 600;
					font-size: 34rpx;
				}
				.viewNum{
					font-size: 26rpx;
					color: $sq-main8;
				}
				.botBtn{
					width: 110rpx; 
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					background: $pss-sq-main-bg;
					font-size: 24rpx;
					color: #fff;
					border-radius: 50rpx;
					&.favorBtn{
						width: 120rpx;
						background: $sq-fue;
						color: $sq-main8;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>